// Variable globale
/* @var integer */
var idmoyen_commfocus; // va contenir l'id du moyen sur lequel on effectue un commentaire ou false
/* @var boolean */
var rechargementencours = false;

$(document).ready(function(){
  // Fonction pour rendre éditable un champ
  // plus utilisé, bug lorsque il n'y a pas de commentaire ... (a corriger ?)
  /**
  $(function(){
    $('div.editable').editable({ // http://www.arashkarimzadeh.com/jquery/7-editable-jquery-plugin.html
      type:'textarea',
      submitBy:'blur',
      onSubmit: submit
    });
    function submit () {
      var idmoyen = $(this).attr('id');
      idmoyen = idmoyen.substring(8, idmoyen.length); // enleve le 'commoyen' de l'id de la div pour recuperer l'id du moyen
      changerEtatMoyen(idmoyen);
    }
  });
  */
 
  // On cache la fenetre -- esthétique ...
//  $('#fenetre').hide();  
  
  /**
  Liste des raccourcis claviers
  F1	112
  F2	113
  F3	114
  F4	115
  F5	116
  F6	117
  F7	118
  F8	119
  F9	120
  F10	121
  F11	122
  F12	123
  */
  // Raccourci clavier
  $(document).keyup(function (e) { // à chaque fois que l'on tape au clavier
    if(e.which == 115){ // si on tape sur F4
      var idmoyen = extractIdMoyenFenetre();
      if(idmoyen){
        actionSuivante(idmoyen);
      }
    };
  });
  
  /**
   * On met la fenetre à la même hauteur que le reste du contenu
   */
  var divHeight;
  var obj = document.getElementById('content');
  
  if(obj){
    if(obj.offsetHeight){
      divHeight=obj.offsetHeight;
    } else if(obj.style.pixelHeight){
      divHeight=obj.style.pixelHeight;
    }
    $('#fenetre').css('min-height', divHeight);
  }
  
  // On déclare les listener
  addListener();
  startclock();
})

/**
 * Ajoute les listener (écouteur) sur les différents éléments
 */
function addListener () {
  /**
   * On intercepte tous les liens contenus dans .contenu pour les afficher dans 
   * la fenêtre détail 
   * On supprime les listeners qui étaient déjà présents sur l'élément avec la méthode "unbind()"
   */
  var $liensfenetre = $('.lienfenetre a');

  $liensfenetre.unbind('click').bind('click', function (event){
    event.stopPropagation(); // on évite l'événement normal de se produire
    var url = $(this).attr('href');
    afficherFenetre(url); // on affiche la fenêtre
    $('html, body').animate({scrollTop: ($("#fenetre").offset().top - 50)}, 500); // on remonte l'utilisateur pour qu'il voit la fenêtre à 50px au dessus de la fenêtre
    return false;
  });
  
  /**
   * On extrait l'id du moyen sur lequel on est en train de changer le commentaire ou l'état
   * Utilisé ici pour éviter de mettre à jour un moyen lorsque l'on est en train de
   * rédiger un commentaire (ce qui fait perdre le commentaire)
   */
  $('.commmoyen, .etatmoyen').unbind('focus').bind('focus', function(){
    idmoyen_commfocus = extractIdMoyen(this);
//    loader(idmoyen_commfocus, 4); // on affiche 'edition en cours'
  });
  $('.commmoyen, .etatmoyen').unbind('focusout').bind('focusout', function(){
    if(idmoyen_commfocus != null){
//      loader(idmoyen_commfocus, 1); // on affiche 'check'
      idmoyen_commfocus = null;
    }
  });
  
  /**
   * Lorsque l'on saisit une description ou une suite dans la maincourante
   * on affiche le bouton "Enregistrer"
   */
  $('.maincourante textarea').bind('focus', function () {
    $('.maincourante .bouton').show();
  });
  
  /**
   * Lorsque l'on survol un moyen dans la vue simple
   * On modifie sa couleur grâce au plugin xcolor
   */
//  var couleurinit = Array();
//  var newcouleur;
//  var idmoyen;


  
//  $('#listemoyens .unmoyen').bind('mouseenter',function () { // quand le curseur rentre dans l'élément
//      idmoyen = extractIdMoyen($(this).children("td"));
//      if(couleurinit[idmoyen] == null){
//        couleurinit[idmoyen] = $(this).children("td").css('background-color');
////        alert(idmoyen);
//      }
////      alert("1 - couleurinit = "+couleurinit)
//  });
//  $('#listemoyens .unmoyen').bind('mouseenter',function () { // quand le curseur rentre dans l'élément
//    couleurinit = $(this).children("td").css('background-color');
//  });
  
//  $('#listemoyens .unmoyen').hover(
//    function () { // quand le curseur rentre dans l'élément
//      idmoyen = extractIdMoyen($(this).children("td"));
//      couleurinit = $(this).children("td").css('background-color');
//      newcouleur = $.xcolor.blue(couleurinit);
//      $(this).children().css('background-color', newcouleur);
////      alert("2 - couleurinit = "+couleurinit[idmoyen])
//    },
//    function () { // quand le curseur sort dans l'élément
//      $(this).children().css('background-color', tabmoyens[idmoyen]);
//    }
//  );
    

  
  
//  $('.maincourante textarea').bind('focusout', function () {
//    $('.maincourante .bouton').hide();
//  })
  
    // lorsque l'on change l'état d'un moyen
    $("#content .etatmoyen").unbind("click").bind("click", function(event){
      event.stopPropagation();
      var idmoyen = extractIdMoyen(this);
      changerEtatMoyen(idmoyen);
    });
    $("#fenetre .etatmoyen").unbind("click").bind("click", function(event){
      event.stopPropagation();
      var idmoyen = extractIdMoyen(this);
      $("select[id='etatmoyen"+idmoyen+"'] option:selected").val($(this).val())
      changerEtatMoyen(idmoyen);
    });
    
    // $("select[id='etatmoyen"+idmoyen+"'] option:selected").val()
    
    // lorsque l'on change le commentaire sur un moyen
    $(".commmoyen").unbind("change").bind("change", function(event){
      event.stopPropagation();
      var idmoyen = extractIdMoyen(this);
      changerEtatMoyen(idmoyen);
    });
    /* Lorsque l'on saisit du texte dans le textarea .commmoyen de la fenetre on 
     * recopie ce texte dans le textarea qui est dans le tableau */
    $("#fenetre .commmoyen").bind("keyup", function(e){
      var idmoyen = extractIdMoyen(this);
      if(idmoyen == extractIdMoyenFenetre()){
        $('#moyen'+idmoyen).children('td').children('.commmoyen').val($(this).val());
      }
    });
    
    // lorsque l'on clique sur le bouton 'Action Suivante' d'un moyen
    $(".button_action").unbind("click").bind("click", function(event){
      event.stopPropagation();
      var idmoyen = extractIdMoyen(this);
      actionSuivante(idmoyen);
    });
}

function startrechargement (){
  if(!rechargementencours){
    rechargementencours = true;
    // Toutes les 5000 ms ( secondes) on met à jour la liste des moyens
    var limite = 5000; // on définit ici le tmps avant rechargement
    var compteur = limite / 1000;

    $('.compteur').show();
    $('.play').hide();
    $('.pause').show();

    $.doTimeout(limite, function(){
      updateLesMoyens(); // on met à jour la liste des moyens
      compteur = 0; // on met le compteur à 0
      $('.countdown').html(compteur); // on affiche le compteur
      compteur = limite / 1000;
      return rechargementencours;
    });

    $.doTimeout(1000, function(){ // on met à jour le compteur
      compteur--;
      $('.countdown').html(compteur);
      return rechargementencours;
    })
  } else {
    $('.compteur').hide();
    $('.play').show();
    $('.pause').hide();
    rechargementencours = false;
  }
  
//  $(function(){
//
////    var note = $('#note'),
//    ts = new Date(0, 0, 0, 0, 0, compteur),
////    ts = compteur,
//    newYear = true;
//
////    if((new Date()) > ts){
////      // The new year is here! Count towards something else.
////      // Notice the *1000 at the end - time must be in milliseconds
////      ts = (new Date()).getTime() + 10*24*60*60*1000;
////      newYear = false;
////    }
//
//    $('#countdown').countdown({
//      timestamp	: ts,
//      callback	: function(days, hours, minutes, seconds){
////
////        var message = "";
////
////        message += days + " day" + ( days==1 ? '':'s' ) + ", ";
////        message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
////        message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
////        message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";
////
////        if(newYear){
////          message += "left until the new year!";
////        }
////        else {
////          message += "left to 10 days from now!";
////        }
////
////        note.html(message);
//      }
//    });
//
//  });
};
////////////////////////////////////////////////////////////////////////////////
// Requêtes et affichage
////////////////////////////////////////////////////////////////////////////////
/* 
 * Effectue une mise à jour du moyen. Met à jour une ligne du tableau
 * @param idmoyen integer l'id du moyen à mettre à jour
 */
function updateMoyen (idmoyen) {
  var vue;
  var vuesimple = $('.vuesimple').length;
  var idmoyenfenetre = extractIdMoyenFenetre();
  
  // Si le moyen que l'on met à jour est aussi le moyen affiché dans la fenêtre
  if(idmoyenfenetre == idmoyen){
    updateFenetre(idmoyenfenetre); // Alors on met aussi à jour la fenêtre
  }
  // On regarde si l'on est sur la vue simple ou sur la vue détaillée
  if(vuesimple == 1){
    vue = 'simple';
  } else {
    vue = 'detaillee';
  }
  
  $.ajax({ // envoie la requete au serveur
    type: "POST",
    url: "moyen/updatemoyen",
    data: "idmoyen="+idmoyen+"&vue="+vue,
    /**
     * $("body").append($(xml).find("html-to-insert").eq(0));
     * eval($(xml).find("script").text());
     */
    beforeSend: function () {
      loader(idmoyen, 0, '');
    },
    success: function (data) {
      $('#moyen'+idmoyen).replaceWith(data); // on affiche les données
    },
    error: function (data) {
      loader(idmoyen, 2, data);
    }
  })
}

/**
 * Met à jour la fenêtre
 * @param idmoyenfenetre id du moyen déjà affiché dans la fenêtre et qu'il 
 * faut mettre à jour
 */
function updateFenetre (idmoyenfenetre) {
  // on recupère le lien pour afficher la fenetre info
  var link = $("#moyen"+idmoyenfenetre).children(".info").children("a").attr('href'); // on peut surement faire mieux
  afficherFenetre(link);
}

/**
 * Met à jour la liste des moyens
 */
function updateLesMoyens () {
  var listemoyens = $('#listemoyens').children(); // on recupère chaque element du tableau
  for (var i = 0, c = listemoyens.length; i < c; i++) { // Pour chaque élément du tableau
    var idmoyen = listemoyens[i].id; // on récupère l'id de la ligne 
    idmoyen = idmoyen.substring(5, idmoyen.length); // on extrait l'id du moyen (on enleve 'detail')
    // On regarde si le moyen que l'on veut mettre à jour n'est pas en train d'être modifié
    if(idmoyen != idmoyen_commfocus){
      updateMoyen(idmoyen); // on met à jour le moyen
    }
  }
}

/**
 * Action suivante
 * @param idmoyen
 */
function actionSuivante (idmoyen) {
  var donnees = "idmoyen="+idmoyen;
  
  $.ajax({ // envoie la requete au serveur
    type: "POST",
    url: "moyen/actionsuivante",
    data: donnees,
    beforeSend: function () {
      loader(idmoyen, 0, '');
    },
    success: function (data) {
      updateMoyen(idmoyen);
    },
    error: function (data) {
      loader(idmoyen, 2, data);
    }
  })
}

/**
 * Envoie une requete Ajax pour changer l'état du moyen
 * Met à jour le moyen sur lequel on fait la requête
 * @param idmoyen l'id du moyen sur lequel il faut  changer l'état
 */
function changerEtatMoyen (idmoyen) {
  var idlsetat = $("select[id='etatmoyen"+idmoyen+"'] option:selected").val(); // on recupere l'id ls état du moyen (exemple : 27 pour Disponible)
//  var commentaire = $('#commoyen'+idmoyen).val();
  var commentaire = $('#moyen'+idmoyen).children('td').children('.commmoyen').val();
  
  var donnees = "idmoyen="+idmoyen+"&idlsetat="+idlsetat+"&commentaire="+commentaire; // paramètre de la requête Ajax
    
  $.ajax({ // envoie la requete au serveur
    type: "POST",
    url: "moyen/changerEtatMoyen",
    data: donnees,
    dataType: 'html',
    beforeSend: function () {
      loader(idmoyen, 0, '');
    },
    success: function (data) {
      updateMoyen(idmoyen);
    },
    error: function (data) {
      loader(idmoyen, 2, data);
    }
  })
}


// Utilisé ?
function afficherDetailMoyen (idmoyen) {
  $.ajax({ // envoie la requete au serveur
    type: "POST",
    url: "moyen/detailmoyen",
    data: 'idmoyen='+idmoyen,
    beforeSend: function () {
      loader(idmoyen, 0);
      loaderFenetre(0);
    },
    success: function (data) {
      $('#fenetre').children('.detail').html(data);
      loader(idmoyen, 1, data);
      loaderFenetre(1, data);
    },
    error: function (data) {
      loaderFenetre(2, data);
    }
  })
}

/**
 * Affiche le lien link dans la fenetre
 * @param link string lien à afficher dans la fenetre
 */
function afficherFenetre (link) {
  var $fenetre = $('#fenetre');
//  $("#fenetre").show();
  $.ajax({ // envoie la requete au serveur
    url: link,
    cache: false,
    beforeSend: function () {
       loaderFenetre(0); // on affiche le loader
    },
    success: function (data) { // si la requête est un succès
       $fenetre.children('.detail').hide().html(data); // on charge le contenu HTML
    },
    complete: function () { // lorsque la requête est complète
      loaderFenetre(3); // on cache le loader
      $fenetre.children('.detail').fadeIn(); // on affiche le contenu HTML avec un effet
      $fenetre.css('min-height', '100px');
    }
  });
}


////////////////////////////////////////////////////////////////////////////////
// Affichage
////////////////////////////////////////////////////////////////////////////////
/**
 * Affiche le loader sur le moyen
 * @param idmoyen id du moyen à afficher
 * @param etat integer
 * etat = 0 => affiche loader
 * etat = 1 => affiche check
 * etat = 2 => affiche échec
 * etat = 3 => affiche rien
 * etat = 4 => affiche édition en cours
 * @param data données que l'on devrait afficher. Utile pour afficher les erreurs
 * @todo ajouter l'heure
 */
function loader (idmoyen, etat, data){
  var heure = '';
  var div = $('#moyen'+idmoyen).children('td').children('.loader');
  var loader = '<img src="/images/ajax-loader.gif" alt="Chargement en cours ... ('+heure+')" title="Chargement en cours ... ('+heure+')" />';
  var check = '<img src="/images/icone-check.png" alt="Dernière actualisation à '+heure+'" title="Dernière actualisation ('+heure+')" />';
  var erreur = '<img src="/images/icone-erreur.png" alt="erreur ('+heure+')" title="Erreur ('+heure+')" />';
  var edit = '<img src="/images/icone-edit.png" alt="Edition en cours ... ('+heure+')" title="Edition en cours ... ('+heure+')" />';
  switch(etat){
    case 0:
      div.html(loader);
      break;
    case 1:
      div.html(check);
      break;
    case 2:
      div.html(erreur+' '+data);
      break;
    case 3:
      div.html('');
      break;
    case 4:
      div.html(edit);
      break;
  }
}

/**
 * Affiche le loader dans la fenetre
 * @param etat integer
 * etat = 0 => affiche loader
 * etat = 1 => affiche check
 * etat = 2 => affiche échec
 * etat = 3 => affiche rien
 * @param data données que l'on devrait afficher. Utile pour afficher les erreurs
 */
function loaderFenetre (etat, data){
  var divloader = $('#fenetre').children('.loader');
  var fenetre = $('#fenetre').children('.detail');
  var loader = '<img src="/images/ajax-loader.gif" alt="loader" />';
  var check = '<img src="/images/icone-check.png" alt="check" />';
  var erreur = '<img src="/images/icone-erreur.png" alt="erreur" />';
  switch(etat){
    case 0:
      fenetre.html('Chargement en cours ...');
      divloader.html(loader);
      break;
    case 1:
      divloader.html(check);
      break;
    case 2:
      divloader.html(erreur+' '+data);
      break;
    case 3:
      divloader.html('');
  }
}

////////////////////////////////////////////////////////////////////////////////
// Récupération des données présent dans la page
////////////////////////////////////////////////////////////////////////////////
/**
 * Extrait l'id du moyen sur un élément présent dans le tableau
 * @param elem généralement this
 * @return integer l'id du moyen ou false si il n'a pas été trouvé
 */
function extractIdMoyen (elem) {
  var idmoyen = $(elem).parents('tr').attr('id'); // on recupère l'id de l'élément parent
  if(!idmoyen){
    idmoyen = extractIdMoyenFenetre();
  } else if (isNaN(idmoyen) && idmoyen.length){ // si ce n'est pas un numérique alors on formate l'id
    idmoyen = idmoyen.substring(5, idmoyen.length); // enleve le 'moyen' de l'id de la div pour recuperer l'id du moyen
  } else {
    idmoyen = false;
  }
  return idmoyen
}

/**
 * Extrait l'id du moyen présent dans la fenêtre
 * @return integer l'id du moyen ou false si il n'a pas été trouvé
 */
function extractIdMoyenFenetre () {
  var div = $("#fenetre").children('.detail').children('.contenufen');
  if(div.length){ // on regarde si la div existe = si une fenetre est chargé ou non
    var idmoyen = div.attr('id'); // on recupère l'id de l'élément parent
    if(isNaN(idmoyen) && idmoyen.length){ // si ce n'est pas un numérique alors on formate l'id
      idmoyen = idmoyen.substring(6, idmoyen.length); // enleve le 'detail' de l'id de la div pour recuperer l'id du moyen
    }
  } else {
    idmoyen = false;
  }
  return idmoyen
}

//function circle(canvas_selector) {
//  var canvas = $(canvas_selector); 
//  var context = canvas.getContext("2d");
//  context.beginPath();
//  context.lineWidth="2";
//  context.arc(100, 100, 90, 0, 2 * Math.PI);
//  context.stroke();
//}

/**
 * Crée un cercle et le remplit d'une couleur
 * http://www.scriptol.fr/html5/canvas/cercle.php
 * @param canvas_id String id du canvas
 * @param color_fill String valeur hexadécimal de la couleur pour remplir le texte
 */
function fillCircle(canvas_id, color_fill) {
  var canvas = document.getElementById(canvas_id); 
  var context = canvas.getContext("2d");
  var posX = 12;
  var poxY = 12;
  var rayon = 12;
  
  context.beginPath();
  context.fillStyle=color_fill;
  context.arc(posX, poxY, rayon, 0, 2 * Math.PI);
  context.fill();
}

function showtime () {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds()
  var timeValue = " " + ((hours >23) ? hours -23 :hours)
  timeValue += ((minutes < 10) ? ":0" : ":") + minutes
  timeValue += ((seconds < 10) ? ":0" : ":")+seconds;
  $('#clock').html(timeValue);

  timerID = setTimeout("showtime()", 1000);
  timerRunning = true;
}

/******************************************************************************
 *****************************************************************************/
var timerID = null;
var timerRunning = false;

function stopclock (){
  if(timerRunning)
    clearTimeout(timerID);
  timerRunning = false;
}
function startclock () {
  stopclock();
  showtime();
}

